// pages/box_painting/painting.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

    displayCanvas: '',
    // displayCanvas: '',
    // 缓冲区，无需手动设定
    canvasWidth: 0, // 画布宽
    canvasHeight: 0, // 画布高
    canvasDom: null, // 画布dom对象
    canvas: null, // 画布的节点
    ctx: null, // 画布的上下文
    dpr: 1, // 设备的像素比
    dprWidth: null,
    dprHeight: null
    //posterHeight: 0, // 海报高
  },
  // start
  //手指触摸动作开始
  touchStart: function (e) {
    //得到触摸点的坐标
    let startX, startY;
    startX = e.changedTouches[0].x
    startY = e.changedTouches[0].y

    // let ctx = this.data.ctx;

    // 线条颜色-实色
    // this.data.ctx.strokeStyle = "#00ff00";
    // 线条颜色-渐变色-设置渐变
    var gradient = this.data.ctx.createLinearGradient(0, 0, 300, 0);
    // gradient.addColorStop("0", "#FF9E9A");
    gradient.addColorStop("0", "#c5d4f3");
    // gradient.addColorStop("0.5", "#FF9E9A");
    gradient.addColorStop("1", "#eeaeca");
    // 用渐变进行填充
    this.data.ctx.strokeStyle = gradient;
    // 创建阴影
    this.data.ctx.shadowColor = "#FDFFFD";
    this.data.ctx.shadowBlur = 2;
    this.data.ctx.shadowOffsetY = 10;

    this.data.ctx.lineWidth = 5;
    this.data.ctx.lineCap = "round";
    this.data.ctx.beginPath();

    // this.data.ctx.arc(100, 100, 60, 0, 2 * Math.PI, true);
    // this.data.ctx.stroke();

    // ctx.draw();
    // var startx, starty, context;
    // startx = e.changedTouches[0].x;
    // starty = e.changedTouches[0].y;
    // wx.createSelectorQuery()
    //   .select("#myCanvas")
    //   .context(function (res) {
    //     console.log("节点实例：", res); // 节点对应的 Canvas 实例。
    //     context = res;
    //     // console.log(ctx)
    //   })
    //   .exec();
    // ctx = context.createPath2D();
    // ctx.setStrokeStyle('red');
    // ctx.setLineWidth(10);
    // ctx.beginPath();
    // // ctx.strokeRect(10, 10, 150, 75)
    // // ctx.draw();
    // // //得到触摸点的坐标
    // // this.startX = e.changedTouches[0].x
    // // this.startY = e.changedTouches[0].y
    // // this.context = wx.createContext()
    // // this.context.setStrokeStyle(this.data.color)
    // // this.context.setLineWidth(this.data.pen)
    // // this.context.setLineCap('round') // 让线条圆润 
    // // this.context.beginPath()
  },
  //手指触摸后移动
  touchMove: function (e) {
    
    var startX1 = e.changedTouches[0].x
    var startY1 = e.changedTouches[0].y
    this.data.ctx.lineTo(startX1, startY1);
    this.data.ctx.stroke();
    console.log(`startX1:${startX1},startY1:${startY1}`)
    // this.startX = startX1;
    // this.startY = startY1;
    //只是一个记录方法调用的容器，用于生成记录绘制行为的actions数组。context跟<canvas/>不存在对应关系，一个context生成画布的绘制动作数组可以应用于多个<canvas/>

  },
  // 手指停止触摸
  touchEnd: function (e) {
    wx.showLoading({
      title: '抽取中',
    })
    setTimeout(() => {
      wx.hideLoading({
        success: (res) => {
          console.log('%ccolorful console.log()', 'background: linear-gradient(to bottom right, blue, pink);padding:0.3rem 1.5rem;color:white')
          wx.showToast({
            title: '抽取成功！',
          })
          this.data.ctx.clearRect(0, 0, this.data.dprWidth, this.data.dprHeight)
          this.setData({
            // displayCanvas: 1
          })
        },
      })
    }, 1000); //5000ms=5s
  },
  // end
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.loadFontFace({
        family: 'Bitstream Vera Serif Bold',
        source: 'url("https://sungd.github.io/Pacifico.ttf")',
        success: console.log
      }),
      wx.loadFontFace({
        family: 'Noto Sans SC',
        source: 'url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@900&display=swap")',
        success: console.log
      })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    const query = wx.createSelectorQuery() // 创建一个dom元素节点查询器
    query.select('#myCanvas')
      .fields({ // 需要获取的节点相关信息
        node: true, // 是否返回节点对应的 Node 实例
        size: true // 是否返回节点尺寸（width height）
      }).exec((res) => {
        //const canvas = res[0].node // canvas就是我们要操作的画布节点
        // 
        const dom = res[0] // 因为页面只存在一个画布，所以我们要的dom数据就是 res数组的第一个元素
        const canvas = dom.node // canvas就是我们要操作的画布节点
        const ctx = canvas.getContext('2d') // 以2d模式，获取一个画布节点的上下文对象
        const dpr = wx.getSystemInfoSync().pixelRatio // 获取设备的像素比，未来整体画布根据像素比扩大
        console.log(canvas)
        // ------ 
        //const ctx = canvas.getContext('2d') // 以2d模式，获取一个画布节点的上下文对象

        // 不加这段，矩形底部会显示不全，我还没看懂
        //const dpr = wx.getSystemInfoSync().pixelRatio
        canvas.width = res[0].width * dpr
        canvas.height = res[0].height * dpr
        ctx.scale(dpr, dpr)

        this.setData({
          canvasDom: dom, // 把canvas的dom对象放到全局
          canvas: canvas, // 把canvas的节点放到全局
          ctx: ctx, // 把canvas 2d的上下文放到全局
          dpr: dpr, // 屏幕像素比
          dprWidth: canvas.width,
          dprHeight: canvas.height
        })
      })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})